<template>
  <div class="name-input-form">
    <h2 class="form-title">请输入基本信息</h2>
    
    <form @submit.prevent="handleSubmit" class="form">
      <!-- 出生日期 -->
      <div class="form-group">
        <label for="birthDate" class="form-label">出生日期 *</label>
        <input
          id="birthDate"
          v-model="userInput.birthDate"
          type="date"
          class="form-input"
          required
          :max="maxDate"
        />
      </div>

      <!-- 时辰选择 -->
      <div class="form-group">
        <label for="timePeriod" class="form-label">出生时辰（可选）</label>
        <select
          id="timePeriod"
          v-model="userInput.timePeriod"
          class="form-select"
        >
          <option value="">请选择时辰</option>
          <option v-for="period in timePeriods" :key="period.name" :value="period.name">
            {{ period.name }} ({{ period.time }})
          </option>
        </select>
      </div>

      <!-- 性别选择 -->
      <div class="form-group">
        <label class="form-label">性别 *</label>
        <div class="gender-options">
          <label class="gender-option">
            <input
              v-model="userInput.gender"
              type="radio"
              name="gender"
              value="男孩"
              class="gender-radio"
            />
            <span class="gender-text">男孩</span>
          </label>
          <label class="gender-option">
            <input
              v-model="userInput.gender"
              type="radio"
              name="gender"
              value="女孩"
              class="gender-radio"
            />
            <span class="gender-text">女孩</span>
          </label>
        </div>
      </div>

      <!-- 姓氏输入 -->
      <div class="form-group">
        <label for="surname" class="form-label">姓氏 *</label>
        <input
          id="surname"
          v-model="userInput.surname"
          type="text"
          class="form-input"
          placeholder="请输入姓氏"
          required
          maxlength="2"
        />
      </div>

      <!-- 提交按钮 -->
      <button
        type="submit"
        class="submit-btn"
        :disabled="!canSubmit || isLoading"
      >
        <span v-if="isLoading" class="loading">生成中...</span>
        <span v-else>生成名字</span>
      </button>
    </form>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useNameStore } from '@/stores/nameStore';
import { TIME_PERIODS } from '@/utils/chineseCulture';

const nameStore = useNameStore();

// 直接使用store的数据
const userInput = computed(() => nameStore.userInput);

// 计算属性
const timePeriods = computed(() => TIME_PERIODS);
const maxDate = computed(() => {
  const today = new Date();
  return today.toISOString().split('T')[0];
});

const canSubmit = computed(() => {
  // 简化的验证逻辑
  const isValid = userInput.value.birthDate && 
                  userInput.value.surname && 
                  userInput.value.gender;
  
  console.log('按钮状态检查:', {
    birthDate: userInput.value.birthDate,
    surname: userInput.value.surname,
    gender: userInput.value.gender,
    isValid,
    isLoading: nameStore.isLoading
  });
  
  return isValid && !nameStore.isLoading;
});

const isLoading = computed(() => nameStore.isLoading);

// 提交表单
const handleSubmit = async () => {
  console.log('表单提交，canSubmit:', canSubmit.value);
  console.log('用户输入:', userInput.value);
  
  if (!canSubmit.value) {
    console.log('表单提交被阻止');
    return;
  }
  
  console.log('开始生成名字...');
  await nameStore.generateNameSuggestions();
  console.log('生成名字完成');
};
</script>

<style scoped>
.name-input-form {
  max-width: 500px;
  margin: 0 auto;
  padding: 2rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.form-title {
  text-align: center;
  color: #333;
  margin-bottom: 2rem;
  font-size: 1.5rem;
  font-weight: 600;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-label {
  font-weight: 500;
  color: #555;
  font-size: 0.9rem;
}

.form-input,
.form-select {
  padding: 0.75rem;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: #4f46e5;
}

.gender-options {
  display: flex;
  gap: 1rem;
}

.gender-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.gender-option:hover {
  background-color: #f3f4f6;
}

.gender-radio {
  width: 1.2rem;
  height: 1.2rem;
  accent-color: #4f46e5;
}

.gender-text {
  font-size: 1rem;
  color: #555;
}

.submit-btn {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: white;
  border: none;
  padding: 1rem;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 1rem;
}

.submit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.submit-btn:disabled {
  background: #9ca3af;
  cursor: not-allowed;
  transform: none;
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.loading::after {
  content: '';
  width: 1rem;
  height: 1rem;
  border: 2px solid transparent;
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
</style> 